<template>
  <div class="container">
    <div class="surrender">
        <div class="fixed">
            <search @toQuery="toQuery"></search>
            <ul class="filter-bar">
                <picker class="picker" @change="bindOrgPickerChange" v-model="orgName" :range="orgList" range-key="F_FullName">
                    <li>{{orgName || '所在公司'}}</li>
                </picker>
                <picker class="picker" @change="bindPlanPickerChange" v-model="planName" :range="planList" range-key="F_ProgramName">
                    <li>{{planName || '方案名称'}}</li>
                </picker>
                <picker class="picker" mode="date" v-model="insuranceDate" @change="bindTimeChange" fields='month'>
                    <li>{{insuranceDate || '入保年月'}}</li>
                </picker>
            </ul>
        </div>
      <div class="roster-list" v-if="userList.length !== 0">
          <ul class="roster-list-content">
              <checkbox-group @change="checkboxChange">
                <li v-for="(item, index) in userList" :key="index" @click="clickLi(item)">
                    <div class="checkbox">
                            <checkbox v-model="item.index" color="red" :checked="item.checked" class="checkbox__input" />
                            <icon class="checkbox__icon" :type="item.checked ? 'success' : 'circle'" size="23" color="#007aff" />
                    </div>
                    <div class="right-content">
                        <div class="title">
                            <h3>{{item.F_EmpName}}</h3>
                            <h3 class="org">{{item.F_EntryOrg}}</h3>
                        </div>
                        <p>{{item.F_ProgramName}}</p>
                        <p>{{item.F_IDNum}}</p>
                        <p>{{item.F_AddDate}}</p>
                    </div>
                </li>
              </checkbox-group>
          </ul>
      </div>
      <no-result v-else></no-result>
      <div class="footer">
          <div class="desc">
                <p>已选退保人数：<span class="blue">{{checkNum}}</span> 人 </p>
                <p>退保总金额：<span class="red">￥{{checkAmount}}</span>元</p>
          </div>
          <div class="quit-btn" @click="surrender">退保</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import search from '@/components/search'
import noResult from '@/components/no-result'
import avaterUrl from 'static/image/avater.png'
import { getEmployees, checkout, getPlans } from 'api/api'
export default {
    data () {
        return {
            avaterUrl,
            pageNum: 1,
            pageSize: 5,
            total: null,
            hasMore: true,
            keyword: '',
            orgId: '',
            orgName: '',
            planId: '',
            planName: '',
            insuranceDate: '',
            userList: [],
            checkList: [],
            planList: []
        }
    },
    components: {
        search,
        noResult
    },

    methods: {
        _getPlans () {
            getPlans()
                .then(res => {
                    this.planList = res.data
                })
        },
        bindPlanPickerChange (e) {
            console.log(e.mp.detail.value)
            let index = e.mp.detail.value
            this.planName = this.planList[index].F_ProgramName
            this.planId = this.planList[index].F_Id
            this._getEmployees('pull')
        },
        toRosterDetail () {
            wx.navigateTo({    // 保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
                url: '/pages/center/rosterDetail'
            })
        },
        _getEmployees (type) {
            getEmployees(this.pageSize, this.pageNum, this.keyword, this.orgId, this.insuranceDate, this.planId)
                .then((res) => {
                    console.log(res)
                    this.checkList = []
                    this.total = res.data.records
                    if (this.pageNum * this.pageSize > this.total) {
                        this.hasMore = false
                    } else {
                        this.hasMore = true
                    }
                    let list
                    if (type === 'pull') {
                        list = res.data.rows
                    } else {
                        list = this.userList.concat(res.data.rows)
                    }
                    list.forEach((item, index) => {
                        item.index = index
                        item.checked = false
                        item.F_AddDate = item.F_AddDate.replace('T00:00:00', '')
                    })
                    this.userList = list
                })
        },
        _checkout (obj) {
            checkout(obj)
                .then((res) => {
                    console.log(res)
                })
        },
        checkboxChange (e) {
            console.log(e)
            this.checkList = e.mp.detail.value
        },
        clickLi (item) {
            item.checked = !item.checked
        },
        toQuery (val) {
            this.keyword = val
            this._getEmployees('pull')
        },
        initDate () {
            this.keyword = ''
            this.orgId = ''
            this.orgName = ''
            this.planId = ''
            this.planName = ''
            this.insuranceDate = ''
        },
        async surrender () {
            console.log('aaa')
            console.log(this.checkList)
            if (this.checkList.length === 0) {
                wx.showToast({
                    title: '请选择数据',
                    icon: 'none',
                    mask: true,
                    duration: 1000
                })
                return
            }
            let _this = this
            let proList = []
            let userArr = []
            this.checkList.forEach((item) => {
                userArr.push(_this.userList[item].F_EmpName)
            })
            let users = userArr.join(',')
            wx.showModal({
                title: '提示',
                content: `确认给${users}退保吗?`,
                success (res) {
                    if (res.confirm) {
                        _this.checkList.forEach((item) => {
                            let obj = {
                                empId: _this.userList[item].F_Id,
                                planId: _this.userList[item].F_MainId
                            }
                            proList.push(checkout(obj))
                        })
                        Promise.all(proList).then((res) => {
                            wx.showToast({
                                title: '全部退保成功',
                                icon: 'success',
                                mask: true,
                                duration: 1000
                            })
                            _this.checkList.splice(0, _this.checkList.length)
                            _this._getEmployees('pull')
                        }).catch(err => {
                            console.log(err)
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                        return
                    }
                }
            })
        },
        bindTimeChange (e) {
            console.log(e)
            this.insuranceDate = e.mp.detail.value
            this._getEmployees('pull')
        },
        bindOrgPickerChange (e) {
            console.log(e)
            console.log(e.mp.detail.value)
            let index = e.mp.detail.value
            this.orgId = this.orgList[index].F_Id
            this.orgName = this.orgList[index].F_FullName
            this._getEmployees('pull')
        }
    },
    computed: {
        checkNum: function () {
            return this.checkList.length
        },
        checkAmount: function () {
            let amount = 0
            let _this = this
            this.checkList.forEach(item => {
                amount += _this.userList[Number(item)].F_Insfee
            })
            return amount
        },
        ...mapState({
            orgList: state => state.org.orgList
        })
    },
    async onReachBottom () {
        if (!this.hasMore) {
            return
        }
        this.pageNum += 1
        console.log('上拉')
        wx.showLoading({
            title: '加载中'
        })
        await this._getEmployees()
        wx.hideLoading()
    },
    async onPullDownRefresh () {
        console.log('下拉刷新')
        this.pageNum = 1
        wx.showLoading({
            title: '刷新中'
        })
        await this._getEmployees('pull')
        wx.stopPullDownRefresh()
        wx.hideLoading()
    },
    onShow () {
        this.initDate()
    },
    async mounted () {
        await this._getEmployees('pull')
        await this._getPlans()
    }
}
</script>

<style lang='stylus' scoped>
.surrender
    width 750rpx
    padding-top 180rpx
    .fixed
        position fixed
        top 0
        width 100%
        z-index 1
        .filter-bar
            width 100%
            background #fff
            display flex
            height 90rpx
            line-height 90rpx
            .picker
                flex 1
            li
                text-align center
                background-image: url('')
                background-repeat no-repeat
                background-position:84% center
                white-space:nowrap
                overflow hidden
                &.none
                    background-image none
    .roster-list
        width 750rpx
        padding 15rpx 21rpx 90rpx
        box-sizing border-box
        position relative
        top 10rpx
        bottom 100rpx
        left 0
        right 0
        overflow auto
        .roster-list-content
            width: 100%
            li
                border-radius 8rpx
                display flex
                padding 32rpx 38rpx 36rpx 26rpx
                background #fff
                margin-bottom 15rpx
                position relative
                .checkbox
                    width 80rpx
                    margin-right 26rpx
                    align-items:center
                    display:flex
                    .checkbox__input
                        position: absolute
                        top: 0
                        left: 0
                        opacity: 0
                        width: 100%
                        height: 100%
                        z-index: 2
                        border: 0 none
                        -webkit-appearance: none
                        appearance: none
                    .checkbox__icon
                        display: inline-block
                        margin-left: 10rpx
                        margin-right: 10rpx
                .right-content
                    flex: 1
                    .title
                        display flex
                        justify-content space-between
                        margin-top 5rpx
                        margin-bottom 20rpx
                        height 40rpx
                        .org
                            width 180rpx
                        h3
                            font-size 32rpx
                            color #333
                            &.gray
                                color #999
                    p
                        line-height 40rpx
                        font-size 20rpx
                        color #666
    .footer
        display flex
        height 94rpx
        width 100%
        position fixed
        bottom 0
        left 0
        z-index 10
        .desc
            width 50%
            background #fff
            padding-top 21rpx
            padding-left 52rpx
            p
                line-height 26rpx
                font-size 18rpx
                .blue
                    color #007aff
                .red
                    color #ff0000
        .quit-btn
            flex 1
            color #ffffff
            background #007aff
            line-height 94rpx
            font-size 33rpx
            text-align center

</style>
